jQuery(document).ready(function () {
    //初始化 CellEditor
    initInputWithBtnCellEditor();
    initInputWithSelectCellEditor();
    initInputWithMenuSelectCellEditor();
    initInputWithInputCellEditor();
    initInputWithInputBtnCellEditor();
    initSelectWithSelectCellEditor();
    initCheckWithCheckCellEditor();
    initMultInputReplaceCellEditor();
    //初始化 CellEditor
    initMenuCellRenderer();
});

var EgiAgGridBase = {};

EgiAgGridBase.agGridLocaleText = {
    // for filter panel
    page: '页',
    more: '更多',
    to: '至',
    of: '共',
    next: '下一页',
    last: '末页',
    first: '首页',
    previous: '下一页',
    loadingOoo: '加载中...',

    // for set filter
    selectAll: '全部',
    searchOoo: '过滤...',
    blanks: '空',

    // for number filter and text filter
    filterOoo: '筛选...',
    applyFilter: '执行筛选...',
    clearFilter: '清空筛选...',
    equals: '等于',
    notEqual: '不等于',

    // for number filter
    lessThan: '小于',
    greaterThan: '大于',
    lessThanOrEqual: '小等于',
    greaterThanOrEqual: '大等于',
    inRange: '在...之间',

    // for text filter
    contains: '包含',
    notContains: '不包含',
    startsWith: '开始于',
    endsWith: '结束于',

    // the header of the default group column
    group: 'laGroup',

    // tool panel
    columns: 'laColumns',
    filters: 'laFilters',
    rowGroupColumns: 'laPivot Cols',
    rowGroupColumnsEmptyMessage: 'la drag cols to group',
    valueColumns: 'laValue Cols',
    pivotMode: 'laPivot-Mode',
    groups: 'laGroups',
    values: 'laValues',
    pivots: 'laPivots',
    valueColumnsEmptyMessage: 'la drag cols to aggregate',
    pivotColumnsEmptyMessage: 'la drag here to pivot',
    toolPanelButton: 'la tool panel',

    // other
    noRowsToShow: 'la no rows',

    // enterprise menu
    pinColumn: 'laPin Column',
    valueAggregation: 'laValue Agg',
    autosizeThiscolumn: 'laAutosize Diz',
    autosizeAllColumns: 'laAutsoie em All',
    groupBy: 'laGroup by',
    ungroupBy: 'laUnGroup by',
    resetColumns: 'laReset Those Cols',
    expandAll: 'laOpen-em-up',
    collapseAll: 'laClose-em-up',
    toolPanel: 'laTool Panelo',
    export: '导出',
    csvExport: '导出CSV(.csv)',
    excelExport: '导出Excel(.xlsx)',

    // enterprise menu pinning
    pinLeft: 'laPin <<',
    pinRight: 'laPin >>',
    noPin: 'laDontPin <>',

    // enterprise menu aggregation and status bar
    sum: 'laSum',
    min: 'laMin',
    max: 'laMax',
    none: 'laNone',
    count: 'laCount',
    average: 'laAverage',

    // standard menu
    copy: '复制',
    copyWithHeaders: '带标题复制',
    ctrlC: 'ctrl+C',
    paste: '粘贴',
    ctrlV: 'ctrl+V'
};

//公用
EgiAgGridBase.valueGetterIdG = function (params) {
    return parseInt(params.node.id) + 1
};
EgiAgGridBase.cellRendererYesG = function (params) {
    var field = params.data[params.colDef.colId];
    var ret = '';
    if (field === "Y") {
        ret = "是";
    }
    return ret;
};
EgiAgGridBase.cellRendererYesIcon = function (params) {
    var field = params.data[params.colDef.colId];
    var ret = '';
    if (field === "Y") {
        ret = '<i class="fa fa-check"></i>';
    }
    return ret;
};
EgiAgGridBase.cellRendererIdG = function (params) {
    return parseInt(params.node.id) + 1
};
EgiAgGridBase.cellStyleIdG8 = { // 设置本栏的CSS样式
    'text-align': 'center',
    'text-indent': '8px'
};
EgiAgGridBase.cellStyleIdG = { // 设置本栏的CSS样式
    'text-align': 'center',
    'text-indent': '0px'
};
EgiAgGridBase.cellStyleCenter = { // 设置本栏的CSS样式
    'text-align': 'center',
    'text-indent': '0px'
};
EgiAgGridBase.componentsListG = {
    // CellEditor
    selectWithSelectCellEditor: SelectWithSelectCellEditor,
    checkWithCheckCellEditor: CheckWithCheckCellEditor,
    inputWithInputCellEditor: InputWithInputCellEditor,
    inputWithInputCellBtnEditor: InputWithInputBtnCellEditor,
    multInputReplaceCellEditor: MultInputReplaceCellEditor,
    inputWithBtnCellEditor: InputWithBtnCellEditor,
    inputWithMenuSelectCellEditor: InputWithMenuSelectCellEditor,
    // CellRenderer
    menuCellRenderer:MenuCellRenderer,
};
// CellEditor Start
//CheckBox控件
function CheckWithCheckCellEditor() {};
var initCheckWithCheckCellEditor = function () {
    // gets called once before the renderer is used
    CheckWithCheckCellEditor.prototype.init = function (params) {
        // create the cell
        var that = this;
        that.container = document.createElement('div');
        that.container.tabIndex = "0";

        var check1Text = '';
        if (params.check1Text) {
            check1Text = params.check1Text;
        }

        that.container.innerHTML = ' \
        <div class="input-group"> \
            <span class="input-group-addon"> \
            <label> <input type="checkbox">&nbsp&nbsp' + check1Text + ' </label>\
            </span> \
        </div> \
            ';
        that.eCheck1 = that.container.getElementsByTagName("input")[0];
        if (params.value==="Y") {
            that.eCheck1.checked = true;
        } else {
            that.eCheck1.checked = false;
        }

    };

    // gets called once when grid ready to insert the element
    CheckWithCheckCellEditor.prototype.getGui = function () {
        return this.container;
    };

    // focus and select can be done after the gui is attached
    CheckWithCheckCellEditor.prototype.afterGuiAttached = function () {
        this.eCheck1.focus();
        $(this.eCheck1).focus().select();
    };

    // returns the new value after editing
    CheckWithCheckCellEditor.prototype.getValue = function () {
        var value = '';
        if (this.eCheck1.checked) {
            value = 'Y';
        } 
        return value;
    };

    // any cleanup we need to be done here
    CheckWithCheckCellEditor.prototype.destroy = function () {
        // but this example is simple, no cleanup, we could  even leave this method out as it's optional
    };

    // if true, then this editor will appear in a popup 
    CheckWithCheckCellEditor.prototype.isPopup = function () {
        // and we could leave this method out also, false is the default
        return true;
    };
};
//有三个选择框的控件
function SelectWithSelectCellEditor() {};
var initSelectWithSelectCellEditor = function () {
    // gets called once before the renderer is used
    SelectWithSelectCellEditor.prototype.init = function (params) {
        // create the cell
        var that = this;
        that.container = document.createElement('div');
        that.container.tabIndex = "0";

        var options1 = [],
            listBtnOption1Html = '';
        if (params.listOptions1) {
            options1 = params.listOptions1;
        } else {

            options1 = ['Option 1', 'Option 2', 'Option 3', 'Option 4', 'Option 5', 'Option 6', 'Option 7'];
        }

        options1.forEach(el => {
            listBtnOption1Html = listBtnOption1Html + '<option>' + el + '</option>';
        });

        that.isHasSelect2 = params.isHasSelect2;
        that.isHasSelect3 = params.isHasSelect3;
        if (that.isHasSelect2) {
            var options2 = [],
                listBtnOption2Html = '';
            if (params.listOptions2) {
                options2 = params.listOptions2;
            } else {

                options2 = ['Option 1', 'Option 2', 'Option 3', 'Option 4', 'Option 5', 'Option 6', 'Option 7'];
            }

            options2.forEach(el => {
                listBtnOption2Html = listBtnOption2Html + '<option>' + el + '</option>';
            });
            that.container.innerHTML = ' \
                <form class="form-inline" role="form">  \
                    <div class="form-group"> \
                        <select class="form-control input-small">' + listBtnOption1Html + '</select> \
                    </div> \
                    <div class="form-group"> \
                        <select class="form-control input-small">' + listBtnOption2Html + '</select> \
                    </div> \
                </form> \
                ';
            that.eSelect = that.container.getElementsByTagName("select")[0];
            that.eSelect2 = that.container.getElementsByTagName("select")[1];
            var vals = params.value.split(',');
            that.eSelect.value = vals[0];
            that.eSelect2.value = vals[1];
        } else if (that.isHasSelect3) {
            var options2 = [],
                listBtnOption2Html = '';
            if (params.listOptions2) {
                options2 = params.listOptions2;
            } else {

                options2 = ['Option 1', 'Option 2', 'Option 3', 'Option 4', 'Option 5', 'Option 6', 'Option 7'];
            }

            options2.forEach(el => {
                listBtnOption2Html = listBtnOption2Html + '<option>' + el + '</option>';
            });
            var options3 = [],
                listBtnOption3Html = '';
            if (params.listOptions3) {
                options3 = params.listOptions3;
            } else {

                options3 = ['Option 1', 'Option 2', 'Option 3', 'Option 4', 'Option 5', 'Option 6', 'Option 7'];
            }

            options3.forEach(el => {
                listBtnOption3Html = listBtnOption3Html + '<option>' + el + '</option>';
            });
            that.container.innerHTML = ' \
                <form class="form-inline" role="form">  \
                    <div class="form-group"> \
                        <select class="form-control input-small">' + listBtnOption1Html + '</select> \
                    </div> \
                    <div class="form-group"> \
                        <select class="form-control input-small">' + listBtnOption2Html + '</select> \
                    </div> \
                    <div class="form-group"> \
                        <select class="form-control input-small">' + listBtnOption3Html + '</select> \
                    </div> \
                </form> \
                ';
            that.eSelect = that.container.getElementsByTagName("select")[0];
            that.eSelect2 = that.container.getElementsByTagName("select")[1];
            that.eSelect3 = that.container.getElementsByTagName("select")[2];
            var vals = params.value.split(',');
            that.eSelect.value = vals[0];
            that.eSelect2.value = vals[1];
            that.eSelect3.value = vals[2];
        } else {
            that.container.innerHTML = ' \
                <form class="form-inline" role="form"> \
                <div class="form-group"> \
                    <div class="form-group"> \
                        <select class="form-control input-small">' + listBtnOption1Html + '</select> \
                    </div> \
                </form> \
                ';
            that.eSelect = that.container.getElementsByTagName("select")[0];
            that.eSelect.value = params.value;
        }

    };

    // gets called once when grid ready to insert the element
    SelectWithSelectCellEditor.prototype.getGui = function () {
        return this.container;
    };

    // focus and select can be done after the gui is attached
    SelectWithSelectCellEditor.prototype.afterGuiAttached = function () {
        this.eSelect.focus();
        $(this.eSelect).focus().select();
    };

    // returns the new value after editing
    SelectWithSelectCellEditor.prototype.getValue = function () {
        if (this.isHasSelect2 && this.eSelect.value) {
            return this.eSelect.value + ',' + this.eSelect2.value;
        } else if (this.isHasSelect3 && this.eSelect.value) {
            return this.eSelect.value + ',' + this.eSelect2.value + ',' + this.eSelect3.value;
        } else {
            return this.eSelect.value;
        }
    };

    // any cleanup we need to be done here
    SelectWithSelectCellEditor.prototype.destroy = function () {
        // but this example is simple, no cleanup, we could  even leave this method out as it's optional
    };

    // if true, then this editor will appear in a popup 
    SelectWithSelectCellEditor.prototype.isPopup = function () {
        // and we could leave this method out also, false is the default
        return true;
    };
};
//有两个编辑框的编辑框控件，第二个有按钮，逗号分隔的值，如：BOM树节点
function InputWithInputBtnCellEditor() {};
var initInputWithInputBtnCellEditor = function () {
    // gets called once before the renderer is used
    InputWithInputBtnCellEditor.prototype.init = function (params) {
        // create the cell
        var that = this;
        that.container = document.createElement('div');
        that.container.tabIndex = "0";
        input1SizeClassHtml = "input-xsmall ";
        input2SizeClassHtml = "input-large ";

        var btnClassHtml = 'red',
            btnInHtml = "...";
        var btn2ClassHtml = 'red',
            btn2InHtml = "";
        if (params.size2Class) {
            input2SizeClassHtml = params.size2Class;
        }
        if (params.btnInHtml) {
            btnInHtml = params.btnInHtml;
            if (params.btnClass) {
                btnClassHtml = params.btnClass;
            }
        }
        if (params.btn2InHtml) {
            if (params.btn2Class) {
                btn2ClassHtml = params.btn2Class;
            }
            btn2InHtml = '<button class="btn ' + btn2ClassHtml + '" type="button">' + params.btn2InHtml + '</button>';
        }

        var readonlyHtml = ''
        if (params.isReadOnly) {
            readonlyHtml = 'readonly="readonly"'
        }
            // <input type="text" class="form-control '+input2SizeClassHtml+'" > \

        that.container.innerHTML = ' \
            <form class="form-inline" role="form"> \
            <div class="form-group"> \
                <input type="text" class="form-control '+input1SizeClassHtml+'" > </div> \
            <div class="form-group"> \
                <input type="text" class="form-control ' + input2SizeClassHtml + '" ' + readonlyHtml + '> \
                <button class="btn ' + btnClassHtml + '" type="button">' + btnInHtml + '</button> '+btn2InHtml+'\
            </div> \
            </form> \
            ';

        that.eInputBtn = that.container.getElementsByTagName("button")[0];
        that.eInputBtn.addEventListener('click', function (event) {
            params.btnOnclick(event);
        });

        that.eInput = that.container.getElementsByTagName("input")[0];
        that.eInput2 = that.container.getElementsByTagName("input")[1];
        var vals = params.value.split(',');
        that.eInput.value = vals[0];
        that.eInput2.value = vals[1];

    };

    // gets called once when grid ready to insert the element
    InputWithInputBtnCellEditor.prototype.getGui = function () {
        return this.container;
    };

    // focus and select can be done after the gui is attached
    InputWithInputBtnCellEditor.prototype.afterGuiAttached = function () {
        this.eInput2.focus();
        $(this.eInput2).focus().select();
    };

    // returns the new value after editing
    InputWithInputBtnCellEditor.prototype.getValue = function () {
        var ret = this.eInput.value + ',' + this.eInput2.value;
        return ret;
    };

    // any cleanup we need to be done here
    InputWithInputBtnCellEditor.prototype.destroy = function () {
        // but this example is simple, no cleanup, we could  even leave this method out as it's optional
    };

    // if true, then this editor will appear in a popup 
    InputWithInputBtnCellEditor.prototype.isPopup = function () {
        // and we could leave this method out also, false is the default
        return true;
    };
};
//有两个编辑框的编辑框控件，逗号分隔的值，如
function InputWithInputCellEditor() {};
var initInputWithInputCellEditor = function () {
    // gets called once before the renderer is used
    InputWithInputCellEditor.prototype.init = function (params) {
        // create the cell
        var that = this;
        that.container = document.createElement('div');
        that.container.tabIndex = "0";

        that.isHasQt = params.isHasQt;
        if (that.isHasQt) {
            that.container.innerHTML = ' \
                <form class="form-inline" role="form"> \
                <div class="form-group"> \
                    <input type="text" class="form-control input-small" > </div> \
                <div class="form-group"> \
                <input type="text" class="form-control input-xsmall" > </div> \
                </form> \
                ';
            that.eInput = that.container.getElementsByTagName("input")[0];
            that.eInputQt = that.container.getElementsByTagName("input")[1];
            var vals = params.value.split(',');
            that.eInput.value = vals[0];
            that.eInputQt.value = vals[1];
        } else {
            that.container.innerHTML = ' \
                <form class="form-inline" role="form"> \
                <div class="form-group"> \
                    <input type="text" class="form-control input-small" > </div> \
                </form> \
                ';
            that.eInput = that.container.getElementsByTagName("input")[0];
            that.eInput.value = params.value;
        }

    };

    // gets called once when grid ready to insert the element
    InputWithInputCellEditor.prototype.getGui = function () {
        return this.container;
    };

    // focus and select can be done after the gui is attached
    InputWithInputCellEditor.prototype.afterGuiAttached = function () {
        this.eInput.focus();
        $(this.eInput).focus().select();
    };

    // returns the new value after editing
    InputWithInputCellEditor.prototype.getValue = function () {
        if (this.isHasQt) {
            return this.eInput.value + ',' + this.eInputQt.value;
        } else {
            return this.eInput.value;
        }
    };

    // any cleanup we need to be done here
    InputWithInputCellEditor.prototype.destroy = function () {
        // but this example is simple, no cleanup, we could  even leave this method out as it's optional
    };

    // if true, then this editor will appear in a popup 
    InputWithInputCellEditor.prototype.isPopup = function () {
        // and we could leave this method out also, false is the default
        return true;
    };
};
//有2个以内的编辑框的编辑框控件，如：付款方式，合同签订后 @TimeLimit 天内，支付设备总价款 @Ratio %作为定金。
function MultInputReplaceCellEditor() {};
var initMultInputReplaceCellEditor = function () {
    // gets called once before the renderer is used
    MultInputReplaceCellEditor.prototype.init = function (params) {
        // create the cell
        var that = this;
        that.container = document.createElement('div');
        that.container.tabIndex = "0";
        //textObj
        that.replaceTextObj = JSON.parse(params.replaceTextObj) ;
        //input数量
        that.inputCount = params.inputCount;
        if (that.inputCount===2) {
            that.container.innerHTML = ' \
                <form class="form-inline" role="form"> \
                <div class="form-group"> \
                    <input type="text" class="form-control input-xsmall" > </div> \
                <div class="form-group"> \
                <input type="text" class="form-control input-xsmall" > </div> \
                </form> \
                ';
            that.eInput = that.container.getElementsByTagName("input")[0];
            that.eInput2 = that.container.getElementsByTagName("input")[1];
            that.eInput.value = that.replaceTextObj.para1;
            that.eInput2.value = that.replaceTextObj.para2;
        } else 
        {
            that.container.innerHTML = ' \
                <form class="form-inline" role="form"> \
                <div class="form-group"> \
                    <input type="text" class="form-control input-small" > </div> \
                </form> \
                ';
            that.eInput = that.container.getElementsByTagName("input")[0];
            that.eInput.value = that.replaceTextObj.para1;
        }

    };

    // gets called once when grid ready to insert the element
    MultInputReplaceCellEditor.prototype.getGui = function () {
        return this.container;
    };

    // focus and select can be done after the gui is attached
    MultInputReplaceCellEditor.prototype.afterGuiAttached = function () {
        this.eInput.focus();
        $(this.eInput).focus().select();
    };

    // returns the new value after editing
    MultInputReplaceCellEditor.prototype.getValue = function () {
        var ret = this.replaceTextObj;
        ret.para1 = this.eInput.value;
        ret.para2 = this.eInput2.value;
       
        return JSON.stringify(ret);
    };

    // any cleanup we need to be done here
    MultInputReplaceCellEditor.prototype.destroy = function () {
        // but this example is simple, no cleanup, we could  even leave this method out as it's optional
    };

    // if true, then this editor will appear in a popup 
    MultInputReplaceCellEditor.prototype.isPopup = function () {
        // and we could leave this method out also, false is the default
        return true;
    };
};
//有自定义按钮的编辑框控件
function InputWithBtnCellEditor() {};
var initInputWithBtnCellEditor = function () {
    // gets called once before the renderer is used
    InputWithBtnCellEditor.prototype.init = function (params) {
        // create the cell
        this.container = document.createElement('div');
        this.container.tabIndex = "0";

        var btnClassHtml = 'red',
            sizeClassHtml = "input-medium ",
            btnInHtml = "...";
        if (params.sizeClass) {
            sizeClassHtml = params.sizeClass;
        }
        if (params.btnClass) {
            btnClassHtml = params.btnClass;
        }
        if (params.btnInHtml) {
            btnInHtml = params.btnInHtml;
        }

        var readonlyHtml = ''
        if (params.isReadOnly) {
            readonlyHtml = 'readonly="readonly"'
        }

        this.container.innerHTML = ' \
            <div class="input-group ' + sizeClassHtml + '"> \
                <input type="text" class="form-control" ' + readonlyHtml + '> \
                <div class="input-group-btn"> \
                    <button class="btn ' + btnClassHtml + '" type="button">' + btnInHtml + '</button> \
                </div> \
            </div> \
            ';
        var that = this;
        this.eInputBtn = this.container.getElementsByTagName("button")[0];
        this.eInputBtn.addEventListener('click', function (event) {
            params.btnOnclick(event);
        });

        this.eInput = this.container.getElementsByTagName("input")[0];
        this.eInput.value = params.value;

    };

    // gets called once when grid ready to insert the element
    InputWithBtnCellEditor.prototype.getGui = function () {
        return this.container;
    };

    // focus and select can be done after the gui is attached
    InputWithBtnCellEditor.prototype.afterGuiAttached = function () {
        this.eInput.focus();
        $(this.eInput).focus().select();
    };

    // returns the new value after editing
    InputWithBtnCellEditor.prototype.getValue = function () {
        return this.eInput.value;
    };

    // any cleanup we need to be done here
    InputWithBtnCellEditor.prototype.destroy = function () {
        // but this example is simple, no cleanup, we could  even leave this method out as it's optional
    };

    // if true, then this editor will appear in a popup 
    InputWithBtnCellEditor.prototype.isPopup = function () {
        // and we could leave this method out also, false is the default
        return true;
    };
};
// 有下拉列表的编辑框控件
function InputWithSelectCellEditor() {};
var initInputWithSelectCellEditor = function () {
    // gets called once before the renderer is used
    InputWithSelectCellEditor.prototype.init = function (params) {
        // create the cell
        this.container = document.createElement('div');
        this.container.tabIndex = "2";

        this.container.innerHTML = ' \
            <div class="input-group input-small"> \
                <input type="text" class="form-control input-sm" placeholder="."> \
                <div class="input-group-btn open"> \
                    <button type="button" class="btn dropdown-toggle input-sm" data-toggle="dropdown" aria-expanded="true"> \
                        <i class="fa fa-angle-down"></i> \
                    </button> \
                    <ul class="dropdown-menu pull-right"> \
                        <li><a href="javascript:;"> 10 </a></li> \
                        <li><a href="javascript:;"> 20 </a></li> \
                        <li><a href="javascript:;"> 30 </a></li> \
                        <li><a href="javascript:;"> 40 </a></li> \
                    </ul> \
                </div> \
            </div> \
            ';
        var that = this;
        this.eInput = this.container.getElementsByTagName("input")[0];
        this.eInput.value = params.value;

    };

    // gets called once when grid ready to insert the element
    InputWithSelectCellEditor.prototype.getGui = function () {
        return this.container;
    };

    // focus and select can be done after the gui is attached
    InputWithSelectCellEditor.prototype.afterGuiAttached = function () {
        this.eInput.focus();
        $(this.eInput).focus().select();
    };

    // returns the new value after editing
    InputWithSelectCellEditor.prototype.getValue = function () {
        return this.eInput.value;
    };

    // any cleanup we need to be done here
    InputWithSelectCellEditor.prototype.destroy = function () {
        // but this example is simple, no cleanup, we could  even leave this method out as it's optional
    };

    // if true, then this editor will appear in a popup 
    InputWithSelectCellEditor.prototype.isPopup = function () {
        // and we could leave this method out also, false is the default
        return true;
    };
};
// 有下拉列表与下拉菜单的编辑框控件
function InputWithMenuSelectCellEditor() {};
var initInputWithMenuSelectCellEditor = function () {
    // gets called once before the renderer is used
    InputWithMenuSelectCellEditor.prototype.init = function (params) {
        // create the cell
        this.container = document.createElement('div');
        this.container.tabIndex = "2";

        var menuHtml = '',
            listBtnHtml = '',
            sizeClassHtml = "input-medium ";
        if (params.sizeClass) {
            sizeClassHtml = params.sizeClass;
        }

        if (params.hasChangeMenu == undefined || params.hasChangeMenu) { //判断是否有下拉菜单
            menuHtmlWithTable = '';
            if (params.hasChangeMenuWithTable == undefined || params.hasChangeMenuWithTable) {
                menuHtmlWithTable = '<li><a href="javascript:;"> <i class="fa fa-table"></i> 使用条件表格 </a></li>';
            }
            menuHtml = ' \
                <div class="input-group-btn"> \
                    <button type="button" class="btn default dropdown-toggle  input-sm" data-toggle="dropdown" tabindex="-1"> <i class="fa fa-text-width"></i>\
                    </button> \
                    <ul class="dropdown-menu"> \
                        <li><a href="javascript:;"> <i class="fa fa-text-width"></i> 使用固定值 </a></li> \
                        <li><a href="javascript:;"> <i class="fa fa-vimeo "></i> 使用变量 </a></li> \
                        ' + menuHtmlWithTable + ' \
                    </ul> \
                </div> \
            ';
        }
        if (params.hasListBtn == undefined || params.hasListBtn) { //判断是否有下拉列表
            options = []
            if (params.listOptions) {
                options = params.listOptions;
            } else {

                options = ['Option 1', 'Option 2', 'Option 3', 'Option 4', 'Option 5', 'Option 6', 'Option 7'];
            }
            listBtnOptionHtml = '';

            options.forEach(el => {
                listBtnOptionHtml = listBtnOptionHtml + '<option>' + el + '</option>';
            });

            if (params.listsize) {
                listsize = params.listsize;
            } else {
                listsize = "5";
            }

            listBtnHtml = ' \
                <div class="input-group-btn inputWithMenuSelectCellEditor" > \
                    <button type="button" class="btn default dropdown-toggle input-sm" data-toggle="dropdown"> \
                        <i class="fa fa-angle-down"></i> \
                    </button> \
                    <ul class="dropdown-menu pull-right ' + sizeClassHtml + ' "> \
                        <select multiple="1" size="' + listsize + '" class="form-control"> ' + listBtnOptionHtml + ' </select> \
                    </ul> \
                </div> \
            ';
        }

        var readonlyHtml = ''
        if (params.isReadOnly) {
            readonlyHtml = 'readonly="readonly"'
        }

        this.container.innerHTML = ' \
            <div class="input-group ' + sizeClassHtml + '"> \
            ' + menuHtml + ' \
                <input type="text" class="form-control input-sm" placeholder="." ' + readonlyHtml + '> \
            ' + listBtnHtml + ' \
            </div> \
            ';
        var that = this;
        this.eInput = this.container.getElementsByTagName("input")[0];
        this.eInput.value = params.value;

    };

    // gets called once when grid ready to insert the element
    InputWithMenuSelectCellEditor.prototype.getGui = function () {
        return this.container;
    };

    // focus and select can be done after the gui is attached
    InputWithMenuSelectCellEditor.prototype.afterGuiAttached = function () {
        this.eInput.focus();
        $(this.eInput).focus().select();
    };

    // returns the new value after editing
    InputWithMenuSelectCellEditor.prototype.getValue = function () {
        return this.eInput.value;
    };

    // any cleanup we need to be done here
    InputWithMenuSelectCellEditor.prototype.destroy = function () {
        // but this example is simple, no cleanup, we could  even leave this method out as it's optional
    };

    // if true, then this editor will appear in a popup 
    InputWithMenuSelectCellEditor.prototype.isPopup = function () {
        // and we could leave this method out also, false is the default
        return true;
    };
};
// CellEditor end

// cell renderer class start
// 下拉菜单按钮
function MenuCellRenderer() {};
var initMenuCellRenderer = function (){
    // init method gets the details of the cell to be rendere
    MenuCellRenderer.prototype.init = function(params) {
        this.container = document.createElement('span');
        this.container.tabIndex = "2";
        var text = 'wwwww';
        text=' \
                    <div class="btn-group"> \
                        <a class="btn btn-sm dropdown-toggle" data-toggle="dropdown" data-close-others="true" href="javascript:;">  \
                            <i class="fa fa-navicon"></i> <i class="fa fa-angle-down"></i> \
                        </a> \
                        <ul class="dropdown-menu pull-right"> \
                            <li><a href="javascript:;"> <i class="fa fa-copy"></i> 复制参数 </a> </li> \
                            <li><a href="javascript:;"> <i class="fa fa-paste"></i> 粘贴参数 </a> </li> \
                        </ul> \
                    </div> \
                ';
        this.container.innerHTML = text;
    };
    MenuCellRenderer.prototype.getGui = function() {
        return this.container;
    };
    // gets called whenever the user gets the cell to refresh
    MenuCellRenderer.prototype.refresh = function(params) {
        // set value into cell again
        // this.eValue.innerHTML = params.valueFormatted ? params.valueFormatted : params.value;
        // return true to tell the grid we refreshed successfully
        return true;
    };

    // gets called when the cell is removed from the grid
    MenuCellRenderer.prototype.destroy = function() {
        // do cleanup, remove event listener from button
        // this.eButton.removeEventListener('click', this.eventListener);
    };
};
// cell renderer class end
